<template>
  <div class="app-container">
    <div class="panel">
      <el-form :model="formInline" label-width="20%" class="search-form">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="出库单号" size="small">
              <el-input
                v-model="formInline.order_sn"
                placeholder="出库单号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="选择物料" size="small">
              <el-select
                v-model="formInline.material_code"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in material"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="销售时间" size="small">
              <el-date-picker
                v-model="formInline.times"
                type="datetimerange"
                :picker-options="pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd H:m:s"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="单据状态" size="small">
              <el-select v-model="formInline.bill_status" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="打印状态" size="small">
              <el-radio
                v-model="formInline.print_status"
                class="custom_radio"
                label=""
                border
                >全部</el-radio
              >
              <el-radio
                v-model="formInline.print_status"
                class="custom_radio"
                label="0"
                border
                >未打印</el-radio
              >
              <el-radio
                v-model="formInline.print_status"
                class="custom_radio"
                label="1"
                border
                >已打印</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item size="small" align="right">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="search"
                @click="search"
                >查询</el-button
              >
              <el-button
                type="success"
                size="small"
                icon="el-icon-printer"
                class="search"
                @click="printHandle"
                :disabled="disabled1"
                >{{ print_button }}</el-button
              >
              <div class="marginLeft10">
                <el-popconfirm
                  title="确定作废这些数据吗？"
                  @onConfirm="deleteHandle"
                >
                  <el-button
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    slot="reference"
                    class="search"
                    :disabled="disabled2"
                    >作废</el-button
                  >
                </el-popconfirm>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="source" v-loading="listLoading">
      <div class="tips">
        <span class="tips-item"
          >出库总量：<span class="numbs">{{ all_outbound_qty }}</span
          >公斤/Kg</span
        >
        <span class="tips-item"
          >待出库总量：<span class="numbs">{{ wait_outbound_qty }}</span
          >公斤/Kg</span
        >
        <span class="tips-item no-border"
          >已完成出库总量：<span class="numbs">{{ finish_outbound_qty }}</span
          >公斤/Kg</span
        >
      </div>
      <vxe-table
        :data="list"
        border
        align="center"
        resizable
        highlight-hover-row
        ref="xGrid"
        style="width: 100%"
        size="mini"
        max-height="400"
        :seq-config="{
          startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
        }"
        :pager-config="tablePage"
        @page-change="handlePageChange"
        :checkbox-config="{
          trigger: 'row',
          highlight: true
        }"
        :scroll-y="{ enabled: false }"
      >
        >
        <vxe-table-column
          type="checkbox"
          width="50"
          fixed="left"
          align="center"
        ></vxe-table-column>
        <vxe-table-column
          fixed="left"
          field="id"
          width="80"
          title="ID"
          sortable
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          fixed="left"
          field="outbound_order_sn"
          width="160"
          title="出库单号"
          resizable
          sortable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="order_sale_order_sn"
          width="150"
          title="销售订单号"
          resizable
          sortable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="bill_status"
          width="100"
          title="单据状态"
          resizable
          show-overflow
          :formatter="parseStatus"
        ></vxe-table-column>
        <vxe-table-column
          field="create_time"
          width="180"
          title="出库时间"
          sortable
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="print_status"
          width="100"
          title="打印状态"
          resizable
          show-overflow
          :formatter="parsePrintStatus"
        ></vxe-table-column>
        <vxe-table-column
          field="print_user_name"
          width="120"
          title="打印人"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="print_time"
          width="180"
          title="打印时间"
          sortable
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="pick_status"
          width="100"
          title="拣货状态"
          resizable
          show-overflow
          :formatter="parsePickStatus"
        ></vxe-table-column>
        <vxe-table-column
          field="pick_user_name"
          width="180"
          title="拣货人"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="pick_time"
          width="180"
          title="拣货时间"
          sortable
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="check_status"
          width="100"
          title="验货状态"
          resizable
          show-overflow
          :formatter="parsePickStatus"
        ></vxe-table-column>
        <vxe-table-column
          field="check_user_name"
          width="180"
          title="验货人"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="check_time"
          width="180"
          title="验货时间"
          sortable
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="pay_date"
          width="180"
          title="订单日期"
          sortable
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column width="280" title="物料名称">
          <template v-slot="{ row }">
            <vxe-list class="my-list" height="auto" :data="row.material_list">
              <template v-slot="{ items }">
                <div v-for="(item, index) in items" :key="index">
                  {{ item.material_name }}
                </div>
              </template>
            </vxe-list>
          </template>
        </vxe-table-column>
        <vxe-table-column width="150" title="物料编码">
          <template v-slot="{ row }">
            <vxe-list class="my-list" height="auto" :data="row.material_list">
              <template v-slot="{ items }">
                <div v-for="(item, index) in items" :key="index">
                  {{ item.material_code }}
                </div>
              </template>
            </vxe-list>
          </template>
        </vxe-table-column>
        <vxe-table-column width="100" title="辅助数量">
          <template v-slot="{ row }">
            <vxe-list class="my-list" height="auto" :data="row.material_list">
              <template v-slot="{ items }">
                <div v-for="(item, index) in items" :key="index">
                  {{ item.assqty }}
                </div>
              </template>
            </vxe-list>
          </template>
        </vxe-table-column>
        <vxe-table-column width="120" title="规格">
          <template v-slot="{ row }">
            <vxe-list class="my-list" height="auto" :data="row.material_list">
              <template v-slot="{ items }">
                <div v-for="(item, index) in items" :key="index">
                  {{ item.spec }}
                </div>
              </template>
            </vxe-list>
          </template>
        </vxe-table-column>
        <vxe-table-column width="180" title="基本计量单位">
          <template v-slot="{ row }">
            <vxe-list class="my-list" height="auto" :data="row.material_list">
              <template v-slot="{ items }">
                <div v-for="(item, index) in items" :key="index">
                  {{ item.basic_measure_unit }}
                </div>
              </template>
            </vxe-list>
          </template>
        </vxe-table-column>
        <vxe-table-column width="180" title="基本计量单位数量（总重）">
          <template v-slot="{ row }">
            <vxe-list class="my-list" height="auto" :data="row.material_list">
              <template v-slot="{ items }">
                <div v-for="(item, index) in items" :key="index">
                  {{ item.qty }}
                </div>
              </template>
            </vxe-list>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="csa_user_name"
          width="180"
          title="客户名称"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="csa_user_code8"
          width="120"
          title="客户ESA码"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="sale_unit_name"
          width="180"
          title="销售组织名称"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="sale_unit_code"
          width="120"
          title="销售组织编码"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="sale_organization"
          width="180"
          title="销售组织"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="house_name"
          width="180"
          title="仓库名"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="house_code"
          width="180"
          title="仓库编码"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="csa_person"
          width="180"
          title="收货人"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="csa_tel"
          width="180"
          title="收货电话"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="csa_address"
          width="280"
          title="收货地址"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="uu_pro_name"
          width="150"
          title="地址省/直辖市名称"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="uu_pro_code"
          width="150"
          title="地址省/直辖市编码"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="uu_con_name"
          width="150"
          title="地址市名称"
          resizable
          show-overflow
        ></vxe-table-column>
        <vxe-table-column
          field="uu_con_code"
          width="150"
          title="地址市编码"
          resizable
          show-overflow
        ></vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        border
        size="small"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :page-sizes="tablePage.pageSizes"
        :total="tablePage.total"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total'
        ]"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import {
  getList,
  getMaterialList,
  deleteOrders,
  changePrintStatus
} from '@/api/outboundManager'
import { mapGetters } from 'vuex'
import JsBarcode from 'jsbarcode'
export default {
  name: 'outbound',
  data() {
    return {
      print_button: '打印单据',
      list: [],
      listLoading: true,
      status: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 0,
          label: '待出库'
        },
        {
          value: 1,
          label: '出库中'
        },
        {
          value: 2,
          label: '取消'
        },
        {
          value: 3,
          label: '作废'
        },
        {
          value: 4,
          label: '完成'
        }
      ],
      material: [],
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      formInline: {
        city_value: [],
        order_sn: '',
        bill_status: '',
        print_status: '0',
        material_code: '',
        start_time: '',
        end_time: '',
        times: []
      },
      all_outbound_qty: 0,
      wait_outbound_qty: 0,
      finish_outbound_qty: 0,
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 100,
        align: 'right',
        pageSizes: [100, 200, 500, 1000],
        layouts: [
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ],
        perfect: true
      },
      disabled1: false,
      disabled2: false
    }
  },
  computed: {
    ...mapGetters(['citys'])
  },
  created() {
    this.$nextTick(() => {
      this.fetchData()
      getMaterialList().then((res) => {
        this.material = res.data.data
      })
    })
    if (!this.citys.length > 0) {
      this.$store
        .dispatch('GetCitys')
        .then(() => {})
        .catch(() => {})
    }
  },
  methods: {
    fetchData() {
      this.listLoading = true
      console.log(this.formInline.times)
      const datas = {
        limit: this.tablePage.pageSize,
        page: this.tablePage.currentPage,
        order_sn: this.formInline.order_sn,
        bill_status: this.formInline.bill_status,
        print_status: this.formInline.print_status,
        material_code: this.formInline.material_code,
        start_time:
          this.formInline.times != null ? this.formInline.times[0] : '',
        end_time: this.formInline.times != null ? this.formInline.times[1] : ''
      }
      getList(datas)
        .then((res) => {
          console.log(res)
          this.list = res.data.list
          this.tablePage.total = res.data.total
          this.all_outbound_qty = res.data.all_outbound_qty
          this.wait_outbound_qty = res.data.wait_outbound_qty
          this.finish_outbound_qty = res.data.finish_outbound_qty
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    search() {
      this.tablePage.currentPage = 1
      this.fetchData()
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    parseStatus({ cellValue }) {
      let val = ''
      switch (cellValue) {
        case 0:
          val = '待出库'
          break
        case 1:
          val = '出库中'
          break
        case 2:
          val = '取消'
          break
        case 3:
          val = '作废'
          break
        case 4:
          val = '完成'
          break
      }
      return val
    },
    parsePrintStatus({ cellValue }) {
      let val = ''
      switch (cellValue) {
        case 0:
          val = '未打印'
          break
        case 1:
          val = '已打印'
          break
      }
      return val
    },
    parsePickStatus({ cellValue }) {
      let val = ''
      switch (cellValue) {
        case 0:
          val = '否'
          break
        case 1:
          val = '是'
          break
      }
      return val
    },
    printHandle() {
      this.disabled1 = true
      const grid = this.$refs.xGrid
      const list = grid.getCheckboxRecords() // 获取选中数据 Array
      if (list.length > 0) {
        this.printOrders(list)
        this.print_button = '打印中'
      } else {
        this.$message({
          message: '未选择任何数据',
          type: 'warning'
        })
        this.disabled1 = false
      }
    },
    deleteHandle() {
      this.disabled2 = true
      const grid = this.$refs.xGrid
      const list = grid.getCheckboxRecords() // 获取选中数据 Array
      if (list.length > 0) {
        let _list = ''
        for (const item of list) {
          _list = _list + ',' + item.id
        }
        deleteOrders(_list)
          .then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            grid.removeCheckboxRow()
            this.disabled2 = false
          })
          .catch(() => {
            this.disabled2 = false
          })
      } else {
        this.$message({
          message: '未选择任何数据',
          type: 'warning'
        })
        this.disabled2 = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    printOrders(list) {
      // console.log(list)
      // 打印样式
      const nowTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      const printStyle = `
              .header {
                width:100%;
                position:relative;
              }
              .bianhao{
                font-size: 11px;
              }
              .tables {
                width: 100%;
                text-align: left !important;
                font-size: 11px;
              }
              .top{
                text-align: center;
              }
              .title{
                font-weight: bold;
                font-size: 16rpx;
              }
              .header_table{
                padding-top:30px;
              }
              td{
                line-height:18px !important;
              }
              .ret{
                position: relative;
              }
              .qrcode {
                text-align: center;
                position: absolute;
                top:0px;
                right:0;
              }
              .content{
                margin: 10px 0;
                position: relative;
              }
              .content .table,.td{
                border:1px solid #000;
                border-collapse:collapse;
                font-size:10px;
                white-space: nowrap;
                overflow: hidden;
              }
              .table{
                width:100%;
                text-align: center;
              }
              .td{
                padding:2px 0 !important;
              }
              .footer{
                position: relative;
                display: flex;
                justify-content: space-between;
                padding-bottom: 45px;
              }
              .user_name{
                font-size: 40px;
              }
              `
      // 打印模板
      const printTmpls = []
      list.forEach((item, index) => {
        const material_list = item.material_list
        // 判断物料数量
        const chunk_m_list = this.chunk(material_list, 5)
        chunk_m_list.forEach((_item, _index) => {
          const img = document.createElement('img')
          // 生成条形码
          JsBarcode(img, item.outbound_order_sn, {
            lineColor: '#000',
            width: 1,
            height: 40,
            displayValue: false
          })
          const m_list = _item
          // 打印头部
          const topTmpl = `
              <div class="header">
                <div class="top">
                  <span class="title">销售出库单</span>
                  <div class="qrcode">
                     ${img.outerHTML}
                  </div>
                </div>

                <div class="header_table">
                   <table class="tables">
                     <tr>
                      <td>库存组织：${item.house_name}</td>
                      <td>业务日期：${item.create_time}</td>
                      <td class="ret">
                      </td>
                     </tr>
                     <tr>
                      <td>客户：${item.csa_user_name}</td>
                      <td>打印时间：${nowTime}</td>
                      <td>
                        单据编号：${item.outbound_order_sn}
                      </td>
                     </tr>
                   </table>
                </div>
              </div>
              `
          // 内容模板

          const contentTmpl = `
                <div class="content">
                  <table class="table">
                    <tr>
                      <td class="td td1">物料编码</td>
                      <td class="td td2" width="300">物料名称</td>
                      <td class="td td3">规格型号</td>
                      <td class="td td4">物料重量</td>
                      <td class="td td5">计量单位</td>
                      <td class="td td6">辅助数量</td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[0] ? m_list[0].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[0] ? m_list[0].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[0] ? m_list[0].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[0] ? m_list[0].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[0] ? m_list[0].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[0] ? m_list[0].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[1] ? m_list[1].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[1] ? m_list[1].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[1] ? m_list[1].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[1] ? m_list[1].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[1] ? m_list[1].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[1] ? m_list[1].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[2] ? m_list[2].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[2] ? m_list[2].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[2] ? m_list[2].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[2] ? m_list[2].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[2] ? m_list[2].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[2] ? m_list[2].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[3] ? m_list[3].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[3] ? m_list[3].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[3] ? m_list[3].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[3] ? m_list[3].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[3] ? m_list[3].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[3] ? m_list[3].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[4] ? m_list[4].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[4] ? m_list[4].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[4] ? m_list[4].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[4] ? m_list[4].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[4] ? m_list[4].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[4] ? m_list[4].assqty : '-'}
                      </td>
                    </tr>
                  </table>
                </div>
                `
          // 底部模板
          const footTmpl = `
              <div class="footer">
                <div class="user_name">${item.csa_person}：
                ${item.express_name}</div>
                <div>第${index + 1} - ${_index + 1}页</div>
              </div>
              `
          const printTmpl = topTmpl + contentTmpl + footTmpl
          printTmpls.push(printTmpl)
        })
      })
      this.$XPrint({
        sheetName: '打印出库单',
        style: printStyle,
        content: printTmpls.join('')
      })
      // 根据打印情况修改打印状态
      setTimeout(() => {
        this.$XModal.confirm('是否打印成功？').then((type) => {
          if (type === 'confirm') {
            let ids = ''
            for (let j = 0; j < list.length; j++) {
              if (j === 0) {
                ids = list[j].id
              } else {
                ids = ids + ',' + list[j].id
              }
            }
            this.changeStatus(ids, list)
          } else {
            this.print_button = '打印单据'
            this.disabled1 = false
          }
        })
      }, 10000)
    },
    chunk(arr, size) {
      var arr1 = []
      for (var ii = 0; ii < Math.ceil(arr.length / size); ii++) {
        arr1[ii] = []
      }
      var j = 0
      var x = 0
      for (var i = 0; i < arr.length; i++) {
        if (!(i % size === 0 && i !== 0)) {
          arr1[j][x] = arr[i]
          x++
        } else {
          j++
          x = 0
          arr1[j][x] = arr[i]
          x++
        }
      }
      return arr1
    },
    changeStatus(ids, list) {
      changePrintStatus(ids)
        .then(() => {
          const grid = this.$refs.xGrid
          grid.remove(list)
          this.print_button = '打印单据'
          this.disabled1 = false
        })
        .catch(() => {
          // 修改失败
          this.$XModal.confirm('打印状态更新失败，重试？').then((type) => {
            if (type === 'confirm') {
              this.changeStatus(ids)
            } else {
              this.print_button = '打印单据'
              this.disabled1 = false
            }
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
table {
  margin: 10px 0;
  position: relative;
  text-align: center;
  padding-bottom: 50px;
}
.vxe-table {
  .vxe-cell {
    white-space: normal !important;
  }
}
.custom_radio {
  margin-right: 0px !important;
}
.my-list {
  white-space: normal !important;
  .vxe-table {
    .vxe-cell {
      white-space: normal !important;
    }
  }
}
.panel {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  background-color: #f9fafc;
}
.source {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 24px;
  .money {
    font-weight: bold;
  }
  .tips {
    padding: 0 0 15px;
    font-size: 12px;
    color: rgba($color: #000000, $alpha: 0.5);
    .tips-item {
      padding-right: 20px;
      padding-left: 20px;
      border-right: 1px solid #dcdfe6;
      .numbs {
        font-weight: 600;
        color: #f56c6c;
        font-size: 14px;
        padding: 0 5px 0 3px;
      }
    }
    .no-border {
      border: 0 !important;
    }
  }
  .margin20 {
    margin-top: 10px;
  }
}
.el-form-item {
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor {
    width: 100%;
  }
  .el-cascader {
    width: 100%;
  }
  .el-radio {
    margin-right: 0px !important;
  }
}
.custom_radio {
  margin-right: 0rpx !important;
}
.marginLeft10 {
  margin-left: 10px;
  display: inline;
  text-align: right;
}
</style>
